<template>
  <div class="headerView">
    <div class="headerDiv">
      <div class="headLeft">
        <div class="headLogoDiv" @click="toHome">
          <img :src="getAssetsImages(`global/logo.png`)" alt="" class="headLogo" />
        </div>
        <div class="headTitleDiv">
          <!-- <div>产品中心</div>
            <div>解决方案</div>
            <div>企业服务</div>
            <div>合作案例</div>
            <div>服务与支持</div>
            <div>链接智慧物流</div> -->
          <div class="nav-item" :class="[index == currentIndex ? 'current' : '']" v-for="(item, index) in menu" :key="index" @click="go(item.path)">
            <Ellipsis :content="item.meta.title">{{ item.meta.title }}</Ellipsis>
          </div>
        </div>
      </div>
      <div class="headRight">
        <div class="right_leftDiv">
          <div class="right_title">
            <img :src="getAssetsImages(`global/sousuo.png`)" alt="" class="sousuo" />
          </div>
          <div class="right_title">
            <div>收藏夹</div>
            <img :src="getAssetsImages(`global/arrow-down@2x.png`)" alt="" class="arrow-down" />
          </div>
          <div class="right_title">商业加盟</div>
          <div class="right_title">
            <div>商户中心</div>
            <a-popover v-model:visible="visible1" title="商户中心" trigger="click">
              <template #content>
                <p>商户1</p>
                <p>商户2</p>
              </template>
              <img :src="getAssetsImages(`global/arrow-down@2x.png`)" alt="" class="arrow-down" />
            </a-popover>
          </div>
        </div>
        <div v-if="isLogin" class="right_rightDiv">
          <div class="right_title" style="margin-left: 12px; cursor: pointer" @mouseover="visible = true">
            <svg-icon name="avatar" :title="userName" style="width: 20px; height: 20px"></svg-icon>
            <a-popover v-model:visible="visible">
              <template #content>
                <a-space direction="vertical" size="small">
                  <a-button size="small" type="link" block @click="center" style="color: black">
                    <template #icon><UserOutlined /></template>
                    个人中心</a-button
                  >
                  <a-button size="small" type="link" block @click="toPassword" style="color: black">
                    <template #icon><KeyOutlined /></template>
                    修改密码</a-button
                  >
                  <a-divider style="margin: 0; padding: 0" />
                  <a-button size="small" type="link" block @click="authLogout" style="color: black">
                    <template #icon><SelectOutlined /></template>退出登录</a-button
                  >
                </a-space>
              </template>
              <span style="padding: 0 0 0 5px">{{ userName }}</span>
              <img :src="getAssetsImages(`global/arrow-down@2x.png`)" alt="" class="arrow-down" />
            </a-popover>
          </div>
        </div>
        <div v-else class="right_rightDiv">
          <div class="right_button">
            <div class="login" type="button" @click="signIn">登录</div>
          </div>
          <div class="right_button">
            <button class="register" type="button" @click="register">注册</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="globalHeader">
import { ref, watch, computed } from 'vue'
import { getAssetsImages } from '@/utils'
import { UserOutlined, KeyOutlined, SelectOutlined } from '@ant-design/icons-vue'
import { ACCESS_TOKEN } from '@/mutation-type'
import { webStorage } from '@/utils/webStorage'
import { useUserStore } from '@/store/user'
import '@/assets/style/header.less'
import router, { menu } from '@/router'
import Ellipsis from '@/components/Ellipsis/index.vue'

const visible = ref(false)
const visible1 = ref(false)

const token = webStorage.ls.get(ACCESS_TOKEN)
const isLogin = token != null

const userName = computed(() => {
  return token && token.remember ? token.remember.name : ''
})

const authLogout = () => {
  let user = useUserStore()
  user.logout().then((res) => {
    window.location.reload()
  })
}

const currentIndex = ref(-1)
const go = (path) => {
  router.push(path)
  light(path)
}
const light = (path) => {
  // console.log(path)
  let index = menu.findIndex((item) => {
    let a = item.path.split('/'),
      b = path.split('/')
    return a[1] === b[1]
  })
  currentIndex.value = index
}
const toHome = () => router.push(`/home/index`)
const center = () => router.push(`/center/index`)
const toPassword = () => router.push(`/user/password`)
const signIn = () => router.push(`/user`)
const register = () => router.push(`/user/register`)

watch(
  () => router.currentRoute.value,
  (route) => {
    light(route.path)
  },
  { immediate: true },
)
</script>

<style lang="less" scoped></style>
